<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* Import Google font - Poppins */
      @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

      * {
        font-family: "Poppins", sans-serif;
      }

      body {
        padding: 0 30px;
      }

      #src-btn,
      .screenshot {
        position: fixed;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      #src-btn {
        bottom: 15px;
        border: none;
        outline: none;
        color: #fff;
        cursor: pointer;
        font-size: 1rem;
        padding: 15px 25px;
        border-radius: 30px;
        background: #4a98f7;
      }

      .src-preview {
        position: fixed;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        pointer-events: none;
        background: rgba(0, 0, 0, 0.65);
        transition: all 0.15s ease;
      }

      .src-preview.show {
        opacity: 1;
        pointer-events: auto;
      }

      .src-preview .screenshot {
        width: 70%;
        top: 50%;
        opacity: 0;
        pointer-events: none;
        aspect-ratio: 16 / 9;
        transition: transform 0.15s ease;
        transform: translate(-50%, -50%) scale(0.9);
      }

      .src-preview.show .screenshot {
        opacity: 1;
        pointer-events: auto;
        transform: translate(-50%, -50%) scale(1);
      }

      .screenshot #close-btn {
        position: absolute;
        right: -25px;
        color: #fff;
        cursor: pointer;
        font-size: 1.1rem;
      }

      .screenshot img {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <button id="src-btn">Capture Screenshot</button>
    <div class="src-preview">
      <div class="screenshot">
        <img src="" alt="Screenshot Preview" />
        <span id="close-btn">&times;</span>
      </div>
    </div>
    <script>
      (async () => {
        const screenshotBtn = document.querySelector("#src-btn");
        const screenshotPreview = document.querySelector(".src-preview");
        const closeBtn = screenshotPreview.querySelector("#close-btn");
        const captureScreen = async () => {
          try {
            // Ask for permission to use a media input to record the current tab
            const stream = await navigator.mediaDevices.getDisplayMedia({ preferCurrentTab: true });
            const video = document.createElement("video");

            video.addEventListener("loadedmetadata", () => {
              const canvas = document.createElement("canvas");
              const ctx = canvas.getContext("2d");
              // Set canvas width & height as video width & height
              canvas.width = video.videoWidth;
              canvas.height = video.videoHeight;

              // Play the video so the drawn image won't be black or blank
              video.play();
              // Draw an image of the captured video stream
              ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
              // Terminate the first video track of the stream
              stream.getVideoTracks()[0].stop();

              // Set the canvas data URL as the screenshot preview source
              screenshotPreview.querySelector("img").src = canvas.toDataURL();
              screenshotPreview.classList.add("show");
            });
            // Set capture stream data as the video source object
            video.srcObject = stream;
          } catch (error) {
            // If capturing the image failed for any reason, show an alert message
            alert("Failed to capture screenshot!");
          }
        };

        closeBtn.addEventListener("click", () => screenshotPreview.classList.toggle("show"));
        screenshotBtn.addEventListener("click", captureScreen);
      })();
    </script>
  </body>
</html>
